<template>
	<view class="goodsCategory">
		<SRV-topbar title="商家商城" messageNum='0' isLeft='true'></SRV-topbar>
        <view class="info">
        	<image :src="info.picture"></image>
        	<view class="right">
        		<view class="right_txt">
        			<text class="oneline" style="font-weight: bold;">{{info.title }}</text>
        		</view>
                <view class="info_title info_or">
                	<view class="km"> {{info.name}} - {{info.mobile}} </view>
                </view>
        		<view class="info_title info_or">
        			<view v-if="info.distance != 0 " class="km"> 距离 {{info.distance}}千米 </view>
        		</view>
                <view class="info-desc">
                	{{info.description}}
                </view>
        	</view>
        </view>
        <view  class="info" v-if="info.is_recharge">
            <view class="btn" @click="jump('merchantOnline', 'merchantKey='+info.merchantKey)">商家充值</view>
        </view>
        <scroll-view class="scroll" scroll-x="true" show-scrollbar="false">
        	<view class="scroll-item" v-for="(item, index) in info.imgList" :key="index">
        		<image :src="item.thumb" lazy-load="true"  @tap="previewImage" :data-src="item.imgUrl" data-id="0" mode=""></image>
        	</view>
        </scroll-view>
		<view class="con" v-if="baseList.length > 0">
			<scroll-view scroll-y="true" class="left">
				<view :class="item.itemId==selIndex?'item check':'item'" v-for="(item,index) in brandList" :key="index" @click="selItem(item.itemId)">
					<text>{{item.itemName}}</text>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="right" lower-threshold="50">
                <view class="mode_4" >
					<view class="cateList">
						<view :class="selCate == 2 ? 'selCate' : ''" @click="selCateFun(2)">酒类</view>
						<view :class="selCate == 1 ? 'selCate' : ''" @click="selCateFun(1)">茶类</view>
					</view>
                    <view class="goods4" v-for="(item2,index2) in goodsList" :key="index2"  @click="jump(item2.jumpType, item2.jumpLink)">
                        <image :src="item2.picture" mode=""></image>
                        <view style="width: calc(100% - 180upx);position: relative;">
                            <view class="goods_line">
                                <view class="line_name">
                                    <text>{{item2.name}}</text>
                                </view>
                            </view>
                            <view class="goods_line">
                                <text class="price_name state_1" :style="item2.stock == 0 ? 'color: #999;' : ''">会员价</text>
                                <text class="sale_price" :style="item2.stock == 0 ? 'color: #999;' : ''">￥{{item2.minPrice}}</text>
                            </view>
                        </view>
                    </view>
                    <view v-if="goodsList.length == 0" class="nocontent">
                    	<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png"></image>
                    	<text>暂无信息～</text>
                    </view>
                </view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
    var _self;
	import serve from '../static/request.js';
	import common from '../static/jump.js';
	export default {
		data() {
			return {
                id: 0,
                selIndex: 0,
                selCate: 0,
                imgList: [],
                info: {
                    title: '',
                    name: '',
                    mobile: '',
                    distance: 0,
                    description: '',
                    imgList: [],
                    is_recharge: 0,
                },
                brandList: [],
                goodsList: [],
                baseList: [],
			}
		},
		methods: {
            getLocationAddress() {
            	wx.getLocation({
            		type: 'wgs84',
            		success: (res) => {
            			uni.setStorageSync('latitude', res.latitude);
            			uni.setStorageSync('longitude', res.longitude);
            			_self.getInfo();
            		},
            		fail: function() {
            			_self.getInfo();
            		},
            	});
            },
			getInfo() {
				serve.request({
                    url: '/merchant/merchant/info',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        id: _self.id,
                        latitude: uni.getStorageSync('latitude'),
                        longitude: uni.getStorageSync('longitude'),
                    },
                    v: '/v3'
                }).then(res => {
                    if(res.code != 200) {
                        uni.showToast({
                        	title: res.message,
                        	icon : 'none',
                        	success:function(){ 
                        		setTimeout(function () { 
                        			uni.switchTab({
                        			    url: '/pages/index/index'
                        			});
                        			return ;
                        		}, 2000) 
                        	} 
                        });
                        return ;
                    }
                    _self.info = res.data;
                    if(_self.info.imgList.length > 0) {
                    	_self.info.imgList.forEach((imgItem, imgKey) => {
                    		_self.imgList.push(imgItem.imgUrl);
                    	});
                    }
                    _self.getGoodsList()
                });
			},
            getGoodsList() {
                serve.request({
                    url: '/merchant/merchant/goods-list',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        id: _self.id
                    },
                    v: '/v3'
                }).then(res => {
                    _self.brandList = res.data.brandList;
                    _self.baseList = res.data.goodsList;
                    _self.goodsList = JSON.parse(JSON.stringify(_self.baseList));
                });
            },
            selItem(i) {
                _self.selIndex = i;
                if(_self.selIndex == 0) {
                    _self.selCate = 0;
                }
                _self.goodsList = [];
                _self.baseList.forEach((it, ik) => {
                	if((_self.selCate == 0 || it.brandType == _self.selCate) && (_self.selIndex == 0 || it.brandId == _self.selIndex)) {
                        _self.goodsList.push(it);
                    }
                });
                _self.$forceUpdate();
            },
            selCateFun(i) {
                _self.selCate = i;
                _self.goodsList = [];
                _self.baseList.forEach((it, ik) => {
                    if((_self.selCate == 0 || it.brandType == _self.selCate) && (_self.selIndex == 0 || it.brandId == _self.selIndex)) {
                       _self.goodsList.push(it);
                    }
                });
                _self.$forceUpdate();
            },
            previewImage: function(e) {
            	var current = e.target.dataset.src
            	uni.previewImage({
            		current: current,
            		urls: _self.imgList
            	})
            },
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			_self = this;
            _self.id = options.id || 0;
            if (uni.getStorageSync('latitude') == "") {
				_self.getLocationAddress();
			} else {
                _self.getInfo();
            }
		},
		onPullDownRefresh() {
			_self.getInfo();
		}
	}
</script>

<style scoped lang="scss">
	.goodsCategory{
		min-height: 100vh;
        
        .info {
        	box-sizing: border-box;
        	padding: 10upx 30upx;
        	display: flex;
        	align-items: center;
            border-bottom: 1rpx solid #333;
        	image {
        		width: 220upx;
        		height: 180upx;
        	}
        	.right {
        		margin-left: 15upx;    
                width: 80%;
        
        		.right_txt {
        			display: flex;
        			align-items: center;
        
        			text:nth-child(1) {
        				color: #333333;
        				font-size: 40upx;
        				margin-right: 19upx;
        			}
        
        			.state {
        				height: 32upx;
        				line-height: 32upx;
        				padding: 4upx 8upx;
        				text-align: center;
        				color: #FFFFFF;
        				font-size: 20upx;
        				border-radius: 2upx;
        				margin-left: 10upx;
        			}
        		}
        
        		.info_title {
        			font-size: 24upx;
        			width: 496rpx;
        		}
        		.info_or{
        			display: flex;
        			justify-content: space-between;
        			.time{
        				font-size: 24upx;
        			}
        			.km{
        				font-size: 24upx;
        			}
        		}
        	}
        }
        .info-desc{
        	font-size: 24rpx;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .scroll {
        	padding-top: 60upx;
        	width: 95%;
        	padding: 10upx 16upx;
        	white-space: nowrap;
            border-bottom: 1rpx solid #333;
        		
        	.scroll-item:first-child {
        		margin-left: 0upx;
        	}
        		
        	.scroll-item {
        		display: inline-flex;
        		flex-direction: column;
        		align-items: center;
        		justify-content: center;
        		margin-left: 20upx;
        		font-size: 20upx;
        		
        		image {
        			width: 140upx;
        			height: 140upx;
        			border-radius: 20upx;
        		}
        		
        		text {
        			padding-top: 26upx;
        		}
        	}
        }
	    .con{
			display: flex;
			.left{
				height: calc(100vh - 285upx);
				width: 180upx;
				border: 1upx #EBEBEB solid;
				.item {
					width: 100%;
					color: #666666;
					font-size: 24upx;
					display: inline-block;
					vertical-align: middle;
					line-height: 80upx;
					height: 80upx;
					text-align: center;
					border-bottom: 1upx #EBEBEB solid;
					border-collapse:collapse;
					position: relative;
					z-index: 0;
					text{
						position: relative;
						z-index: 5;
					}
					.sel {
						width: 78upx;
						position: absolute;
						left: 50upx;
						bottom:20upx ;
						z-index: 2;
					}
				}
				.check{
					font-weight:bold ;
					color: #3333FF;
					background: #F7F7F7;    
                    font-size: 30rpx;
				}
				
				
			}
		    .right{
				height: calc(100vh - 285upx);
				width: 570upx;
				background: rgba(204,204,204,0.15);
				
			}
		}
        
        .mode_4 {
            display: flex;
            box-sizing: border-box;
            flex-wrap: wrap;
            width: 100%;
			.cateList {
				display: flex;
				padding: 20rpx;
				width: 100%;
				view{
					width: 50%;
					text-align: center;
					letter-spacing: 10rpx;
				}
				.selCate{
					font-size: 34rpx;
					font-weight: bold;
					color: #3333FF;
				}
			}
            .goods4 {
                width: 100%;
                padding-bottom: 30rpx;
                border: 6rpx solid #eaeaea;
                margin-left: 10rpx;
                padding: 10rpx 4rpx;
                text-align: center;
                border-radius: 10rpx;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                image {
                    width: 150upx;
                    height: 150upx;
                    border: 1rpx solid #eee;
                    border-radius: 2%;
                }
                .line_name{
                    font-size:30upx;
                    line-height: 50upx;
                    color: #333;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
        }
        
        .titleInfo{
            margin: 20rpx 30rpx;
            text-align: center;
            border: 10rpx solid #ccc037;
            padding: 20rpx 0;
        }
        .goods_line{
            text-align: center;
        }
        .price_name {
            font-size: 28rpx;
            text-align: right;
        }
        .sale_price {
            font-size: 40rpx;
            color: #e61d07;
        }
        .cost_price {
            text-align: right;
            font-size: 28rpx;
            color: #615555;
        }
        .state_0{
            color: #ff000f;
        }
        .state_1{
            color: #FFBC00;
        }
        .state_2{
            color: #0b44ea;
        }
        .btn {
            width: 30%;
            text-align: center;
            border: 1px solid #ffd900;
            border-radius: 20rpx;
            font-size: 40rpx;
            background: #ffd900;    
            margin-left: auto;
        }
		.nocontent {
			width: 100%;
			padding-top: 338rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 220rpx;
				height: 220rpx;
			}

			text {
				font-size: 28rpx;
				color: rgba(204, 204, 204, 1);
				margin-top: 30rpx;
			}
		}
	}
</style>